// 从透传的 provide 中通过计算属性读取对应属性
// 直接 provide 透传对象时，是不可响应的，https://v2.cn.vuejs.org/v2/api/#provide-inject

import Env from '@/env/Env'
import {getCurrentPageInfo} from '@/services/common/Device'

// 头条不支持深层透传：
// https://github.com/dcloudio/uni-app/issues/3360#issuecomment-1074913528
// https://github.com/dcloudio/uni-app/issues/4386
const notSupportDeepProvide = Env.PLATFORM.TT

// 直接使用一个对象做缓存，会出现数据混乱的问题
// 比如 index 页面和 xuanhao 页面都引入了 virtualNumberList 组件
// 在 index 页注入 tracker，virtualNumberList 中可以接受到 tracker，这是预期内的行为
// 这时直接跳转到 xuanhao 页，xuanhao 页没有初始化 tracker，但是由于在上一个页面设置了 cache，因此在 xuanhao 页中的 virtualNumberList 也能取到 tracker，但是 tracker 的 page_type 为 index，这是预期之外的错误行为
// provide 一般以页面元素作为根元素去注入，以当前页面路径为 key
// 注意事项：useSetResponsiveProvide() 的调用时机必须在 useGetResponsiveProvideMixin() 之前
const cacheMap = {}

function getCacheKey(propKey) {
  const currentPageInfo = getCurrentPageInfo()

  if (!currentPageInfo) {
    return propKey
  }

  return `${propKey}_${currentPageInfo.route}`
}

/**
 * 获取响应式的对象
 * @param {*} propKey
 * @returns
 */
export function useGetResponsiveProvideMixin(propKey) {
  if (!propKey) {
    return {}
  }

  if (notSupportDeepProvide) {
    return {
      data() {
        const cacheKey = getCacheKey(propKey)

        console.log('useGetResponsiveProvideMixin', cacheKey)
        return {
          [propKey]: cacheMap[cacheKey]
        }
      }
    }
  }

  return {
    inject: ['provideObj'],
    computed: {
      [propKey]() {
        return this.provideObj?.[propKey]
      }
    }
  }
}

/**
 * 初始化响应式的对象
 * @param {*} propKey
 * @returns
 */
export function useInitResponsiveProvideMixin(propKey, propValue) {
  if (!propKey || notSupportDeepProvide) {
    return {}
  }

  return {
    provide() {
      return {
        provideObj: this.provideObj
      }
    },
    data() {
      return {
        provideObj: {
          [propKey]: propValue
        }
      }
    }
  }
}

/**
 * 设置响应式的对象
 * @param {*} propKey
 * @returns
 */
export function useSetResponsiveProvide(instance, propKey, propValue) {
  if (!instance) {
    return {}
  }

  if (notSupportDeepProvide) {
    const cacheKey = getCacheKey(propKey)

    cacheMap[cacheKey] = propValue
    console.log('useSetResponsiveProvide', cacheKey)
    return
  }

  instance.$set(instance['provideObj'], propKey, propValue)
}
